<HTML>
<HEAD>
<TITLE>JavaScript Source Code 3000:  Games:  Magic Squares</TITLE>
<META HTTP-EQUIV="JavaScript Source Code 3000" CONTENT = "no-cache">
<META NAME="date" CONTENT="2000-09-09">
<META NAME="channel" CONTENT="Web Developer">
<META NAME="author" CONTENT="Roger Zeitel (rzeitel@mars.superlink.net)">
<META NAME="section" CONTENT="Games">
<META NAME="description" CONTENT="Here is a fun JavaScript game.  Try to put the squares back in order.  The '0' repesents the empty spot, and click a square next to the 0 to make them trade places!  Get the squares back in order and you win!">

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function initArray() {
this.length = initArray.arguments.length
for (var i = 0; i < this.length; i++)
this[i+1] = initArray.arguments[i]
}
var pos = new initArray(9,9,9,9,9,9,9,9,9);
var nummoves= 0;
function random() {
today = new Date();
num = today.getTime();
num = Math.round(Math.abs(Math.sin (num)*1000000)) % 9;
return num;
}
function display(pos) {
for (var i=0; i<9; i++)  {
document.forms[0].elements[i].value = pos[i];
}
document.forms[0].moves.value= nummoves;
win();
}
function move(num) {
if (num < 8 && pos[num+1]==0) {
pos[num+1]= pos[num];
pos[num]= 0;
nummoves++;
}
else if (num > 0 && pos[num-1]==0) {
pos[num-1]= pos[num];
pos[num]= 0;
nummoves++;
} 
else if (num > 2 && pos[num-3]==0) {
pos[num-3]= pos[num];
pos[num]= 0;
nummoves++;
}
else if (num < 6 && pos[num+3]==0 ) {
pos[num+3]= pos[num];
pos[num]= 0;
nummoves++;
}
display(pos);
}
function win() {     
if (pos[0]== 1 & pos[1]== 2 & pos[2]== 3 & pos[3]== 4 & 
pos[4]== 5 & pos[5]== 6 & pos[6]== 7 & pos[7]== 8 & pos[8]== 0) {
if (confirm('You did it! Do you want to restart?')) newgame();
   }
}
function newgame() {
var x=1;
for (var i=0; i<9; i++) {
pos[i]=9;
}
for (var i=0; i<9;i++) {
randomnum=random();
if (randomnum==9) randomnum=8;
x=1;
for (var j=0; j<9; j++)  {
if (j==i)
continue;
if (randomnum==pos[j]) {
x=0;
break;
   }
}
if (x==0) {
i--;
continue;
}
pos[i]=randomnum;
}
nummoves=0;
display(pos);   
}   
// End -->
</SCRIPT>
</HEAD>

<BODY BGCOLOR=#ffffff vlink=#0000ff onLoad="window.newgame()">

<BR>
<center>
<table width="600" cellpadding="0" cellspacing="10">
<tr>
<td width="468" align="center">

	
</td>
<td width="120" align="center">

	
</td>
</tr>
</table>
<BR>
<BR>
<BASEFONT SIZE=3>
  <FONT SIZE=6>
<B><FONT SIZE="+2" FACE="Helvetica,Arial" ALIGN=RIGHT COLOR="#0000FF">
<b><A HREF="../index.htm" /" TARGET="_top">
Home</A> </b><img src="../img/arrow.gif" /img/arrow.gif" height=13 width=7 border=0 alt="}"> <b><A HREF="index.htm" /games/"><font color="#FF0000">Games</font></A> </b>
<img src="../img/arrow.gif" /img/arrow.gif" height=13 width=7 border=0 alt="}"> <FONT COLOR="#006666">Magic Squares</FONT></b></FONT><BR>
</B><BR>
  </FONT>
<TABLE BORDER=0 WIDTH=486 CELLPADDING=3 CELLSPACING=0>
<tr><td><font FACE=" helvetica,arial,geneva">
<br>
<br>
<!-- Description --><!--content_start-->

Here is a fun JavaScript game.  Try to put the squares back in order.  The '0' repesents the empty spot, and click a square next to the 0 to make them trade places!  Get the squares back in order and you win!
<br><hr>
</td></tr>
</table>
<!--  Demonstration  -->
<BODY>
<CENTER>
<h1 align=center>Magic Squares</h1><p>
<FORM>
<table border=0 celpadding=0 cellspacing=10>
<tr><td>
<input type="button" value=" 1 " onClick="window.move(0)">
<input type="button" value=" 2 " onClick="window.move(1)">
<input type="button" value=" 3 " onClick="window.move(2)"><br>
<input type="button" value=" 4 " onClick="window.move(3)">
<input type="button" value=" 5 " onClick="window.move(4)">
<input type="button" value=" 6 " onClick="window.move(5)"><br>
<input type="button" value=" 7 " onClick="window.move(6)">
<input type="button" value=" 8 " onClick="window.move(7)">
<input type="button" value=" 0 " onClick="window.move(8)"><p>
</td>
</td>
<td valign=top>
Put the numbers in order so that they read 1-8. <br>
The 0 is the 'empty' place.  Click on any number <br>
next to 0 and they will switch places.
</td>
</tr>
<tr><td align=center>
# of moves:<br>
<input name="moves" size=7 value="0"> <p> 
</td>
<td align=center><br>
<input type="submit" value="New Game" onClick="window.newgame()">
</td>
</tr>
</table>
</FORM>
</CENTER>
<P>
<P>
<a name="source">
<TABLE BORDER=0 WIDTH=486 CELLPADDING=3 CELLSPACING=0>
<tr><td BGCOLOR=yellow><font FACE="helvetica,arial,geneva"><b>JavaScript Source Code 3000:  Games:  Magic Squares</b>
<p>Simply click inside the window below, use your cursor to highlight the script, and copy (type Control-c or Apple-c) the script into a new file in your text editor (such as NotePad or SimpleText) and save (Control-s or Apple-s).  The script is yours!<br><br></font></td></tr>
<tr><td BGCOLOR=yellow ALIGN=CENTER>
<form NAME="copy">

<DIV align="center">
<input type=button value="Highlight All" onClick="javascript:this.form.txt.focus();this.form.txt.select();">&nbsp;&nbsp;&nbsp;&nbsp;
<INPUT TYPE="text" NAME="total" VALUE="Script Size:  3.34 KB  " size="24">
</DIV>

<textarea NAME="txt" ROWS=20 COLS=75 WRAP=VIRTUAL>

&lt;!-- THREE STEPS TO INSTALL MAGIC SQUARES:

   1.  Paste the coding into the HEAD of your HTML document
   2.  Put the onLoad event handler in the BODY tag
   3.  Add the last code into the BODY of your HTML document  --&gt;

&lt;!-- STEP ONE: Copy this code into the HEAD of your HTML document  --&gt;

&lt;HEAD&gt;

&lt;SCRIPT LANGUAGE="JavaScript"&gt;

&lt;!-- Original:  Roger Zeitel (rzeitel@mars.superlink.net) --&gt;
&lt;!-- Web Site:  http://mars.superlink.net/rzeitel/games.html --&gt;

&lt;! &gt;
&lt;! &gt;

&lt;!-- Begin
function initArray() {
this.length = initArray.arguments.length
for (var i = 0; i &lt; this.length; i++)
this[i+1] = initArray.arguments[i]
}
var pos = new initArray(9,9,9,9,9,9,9,9,9);
var nummoves= 0;
function random() {
today = new Date();
num = today.getTime();
num = Math.round(Math.abs(Math.sin (num)*1000000)) % 9;
return num;
}
function display(pos) {
for (var i=0; i&lt;9; i++)  {
document.forms[0].elements[i].value = pos[i];
}
document.forms[0].moves.value= nummoves;
win();
}
function move(num) {
if (num &lt; 8 && pos[num+1]==0) {
pos[num+1]= pos[num];
pos[num]= 0;
nummoves++;
}
else if (num &gt; 0 && pos[num-1]==0) {
pos[num-1]= pos[num];
pos[num]= 0;
nummoves++;
} 
else if (num &gt; 2 && pos[num-3]==0) {
pos[num-3]= pos[num];
pos[num]= 0;
nummoves++;
}
else if (num &lt; 6 && pos[num+3]==0 ) {
pos[num+3]= pos[num];
pos[num]= 0;
nummoves++;
}
display(pos);
}
function win() {     
if (pos[0]== 1 & pos[1]== 2 & pos[2]== 3 & pos[3]== 4 & 
pos[4]== 5 & pos[5]== 6 & pos[6]== 7 & pos[7]== 8 & pos[8]== 0) {
if (confirm('You did it! Do you want to restart?')) newgame();
   }
}
function newgame() {
var x=1;
for (var i=0; i&lt;9; i++) {
pos[i]=9;
}
for (var i=0; i&lt;9;i++) {
randomnum=random();
if (randomnum==9) randomnum=8;
x=1;
for (var j=0; j&lt;9; j++)  {
if (j==i)
continue;
if (randomnum==pos[j]) {
x=0;
break;
   }
}
if (x==0) {
i--;
continue;
}
pos[i]=randomnum;
}
nummoves=0;
display(pos);   
}   
// End --&gt;
&lt;/SCRIPT&gt;
&lt;/HEAD&gt;

&lt;!-- STEP TWO: Put this onLoad event handler in the BODY tag  --&gt;

&lt;BODY onLoad="window.newgame()"&gt;

&lt;!-- STEP THREE: Add the last coding to the BODY of your HTML document --&gt;

&lt;CENTER&gt;
&lt;h1 align=center&gt;Magic Squares&lt;/h1&gt;&lt;p&gt;
&lt;FORM&gt;
&lt;table border=0 celpadding=0 cellspacing=10&gt;
&lt;tr&gt;&lt;td&gt;
&lt;input type="button" value=" 1 " onClick="window.move(0)"&gt;
&lt;input type="button" value=" 2 " onClick="window.move(1)"&gt;
&lt;input type="button" value=" 3 " onClick="window.move(2)"&gt;&lt;br&gt;
&lt;input type="button" value=" 4 " onClick="window.move(3)"&gt;
&lt;input type="button" value=" 5 " onClick="window.move(4)"&gt;
&lt;input type="button" value=" 6 " onClick="window.move(5)"&gt;&lt;br&gt;
&lt;input type="button" value=" 7 " onClick="window.move(6)"&gt;
&lt;input type="button" value=" 8 " onClick="window.move(7)"&gt;
&lt;input type="button" value=" 0 " onClick="window.move(8)"&gt;&lt;p&gt;
&lt;/td&gt;&lt;/td&gt;
&lt;td valign=top&gt;
Put the numbers in order so that they read 1-8. &lt;br&gt;
The 0 is the 'empty' place.  Click on any number &lt;br&gt;
next to 0 and they will switch places.
&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;&lt;td align=center&gt;
# of moves:&lt;br&gt;
&lt;input name="moves" size=7 value="0"&gt; &lt;p&gt; 
&lt;/td&gt;
&lt;td align=center&gt;&lt;br&gt;
&lt;input type="submit" value="New Game" onClick="window.newgame()"&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/FORM&gt;
&lt;/CENTER&gt;

 

&lt;!-- Script Size:  3.34 KB  --&gt;
</textarea><br><font FACE="helvetica,arial,geneva"></font></td></tr>

</table>
</form>
</FONT>
</CENTER>


</center>
</body></html>